<route lang="json5">
{
  needLogin: true,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '讨论组名称',
  },
}
</route>
<template>
  <view class="change-name">
    <!-- 顶部导航栏 -->
    <wd-navbar
      title="讨论组名称"
      left-arrow
      placeholder
      @click-left="goBack"
      custom-style="background: #fff; border-bottom: none;"
      fixed
      safeAreaInsetTop
    >
      <template #right>
        <wd-button size="small" :round="false" custom-class="custom-success" @click="handleSubmit">
          完成
        </wd-button>
      </template>
    </wd-navbar>
    <view class="change-main">
      <wd-textarea
        auto-height
        v-model="groupInfo.name"
        placeholder="请填写讨论组名称"
        :maxlength="96"
        clearable
        :show-word-limit="false"
        :disable-default-padding="true"
        :no-border="true"
        custom-class="min-h-110rpx bg-[#FFFFFF] border-rd-[10rpx_10rpx_10rpx_10rpx] "
      ></wd-textarea>
      <view class="mt-10rpx font-400 text-30rpx text-[#767C89] lh-43rpx text-right">96字</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { findGroupInfo, updateGroup, updateGroupName } from '@/service/edu/group'
import { useChatStore } from '@/store'
import { ref, onMounted } from 'vue'
const chatStore = useChatStore()
const groupInfo = ref({
  id: '',
  groupId: '',
  name: '',
  showGroupName: '',
  headImageThumb: '',
})
const goBack = () => {
  uni.navigateBack()
}
onLoad(() => {
  const pages = getCurrentPages()
  const currentPage: any = pages[pages.length - 1]
  const query = currentPage.$page?.options || currentPage?.options || currentPage.$route.query
  if (query) {
    groupInfo.value.groupId = query.groupId
    handleGetInfo(query.groupId)
  }
})
const handleGetInfo = (groupId) => {
  findGroupInfo(groupId).then((group) => {
    if (group.code === 200) {
      groupInfo.value = {
        ...group?.data,
      }
    }
  })
}
const handleSubmit = () => {
  updateGroupName({
    groupId: groupInfo.value.id,
    groupName: groupInfo.value.name,
  }).then((group) => {
    if (group.code === 200) {
      uni.showToast({
        title: '修改群名称成功',
        icon: 'success',
      })
      chatStore.updateChatFromGroup(groupInfo.value)
      uni.navigateBack()
    } else {
      uni.showToast({
        title: group.msg,
        icon: 'fail',
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.change-main {
  padding: 24rpx;
}
.custom-success {
  border-radius: 10rpx !important;
}
:deep(.wd-textarea__inner) {
  padding: 31rpx 0 36rpx 35rpx !important;
}
</style>
